﻿<template>
     <div class="layout-main">
        <el-form ref="sysMenu" label-position="right" label-width="120px" :model="sysMenu" :rules="rules">
            <el-input type="hidden" :model="sysMenu.id" />
            <el-form-item label="上级菜单" prop="parentId">
                <el-select size="small" style="width: 240px" v-model="sysMenu.parentId" :label-in-value=true>
                    <el-option :key="0" :value="0" :label="'作为一级菜单'">作为一级菜单</el-option>
                    <el-option v-for="(pd,ind) in menus" :key="pd.id" :label="pd.title" :value="pd.id">{{pd.title}}</el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="菜单名" prop="title">
                <el-input size="small" v-model="sysMenu.title" placeholder="菜单名" style="width: 240px" />
            </el-form-item>
            <el-form-item label="路由" prop="path">
                <el-input size="small" v-model="sysMenu.path" placeholder="路由" style="width: 240px" />
            </el-form-item>
            <el-form-item label="路由名" prop="path">
                <el-input size="small" v-model="sysMenu.name" placeholder="路由" style="width: 240px" />
            </el-form-item>
            <el-form-item label="组件" prop="component">
                <el-input size="small" v-model="sysMenu.component" placeholder="组件" style="width: 240px" />
            </el-form-item>
            <el-form-item label="图标" prop="icon">
                <el-input size="small" v-model="sysMenu.icon" placeholder="图标" style="width: 240px" />
            </el-form-item>
            <el-form-item label="排序" prop="sortIndex">
                <el-input size="small" v-model="sysMenu.sortIndex" placeholder="排序" style="width: 240px" />
            </el-form-item>
            <el-form-item label="状态" prop="state">
                <el-radio-group  size="small" v-model="sysMenu.state" placeholder="状态" style="width: 240px">
                    <el-radio :label="1" :value="1">
                        <span>显示</span>
                    </el-radio>
                    <el-radio :label="0" :value="0">
                        <span>不显示</span>
                    </el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <Divider>操作按钮<el-button :style="{marginLeft:'20px'}" type="primary" @click="this.addBtn" size="small">新增按钮</el-button>
        </Divider>
        <el-form inline>
            <div v-for="(bt,ind) in buttons" :key="ind">
                <el-form-item>
                    <el-input size="small" v-model="bt['name']" placeholder="名称" />
                </el-form-item>
                <el-form-item>
                    <el-input size="small" v-model="bt['methodName']" placeholder="方法名称" />
                </el-form-item>
                <el-form-item>
                    <el-button type="error" @click="delBtn(bt)" size="small">移除</el-button>
                </el-form-item>
            </div>
        </el-form>
        <div>
            <el-button @click="cancel" size="small">取消</el-button>
            <el-button type="primary" size="small" :loading="modalLoading" @click="ok">确定</el-button>
        </div>
    </div>
</template>
<script>
export default {
    name: 'SysMenu',
    data() {
        return {
            loading: false,
            modalLoading: false,

            others: {

            },
            sysMenu: {
                state: 1,
                parentId: 0
            },
            buttons: [],
            menus: [],
            rules: {
                name: [
                    { required: true, message: "菜单名不能为空" }
                ],
                parentId: [
                    { required: true, message: "上级菜单不能为空" }
                ],
                path: [
                    { required: true, message: "路由不能为空" }
                ],
                component: [
                    { required: true, message: "主键不能为空" }
                ]
            },
            sysMenuId: null
        };
    },
    mounted: function() {
        this.sysMenuId = this.$route.params.sysMenuId;

        this.getDetail();
        this.getList();

    },
    methods: {
        addBtn: function() {
            this.buttons.push({ name: '', methodName: "" });
        },
        delBtn: function(btn) {
            var ind = this.buttons.indexOf(btn);
            this.buttons.splice(ind, 1);
        },
        getDetail: function() {
            if (this.sysMenuId == null || this.sysMenuId == undefined || this.sysMenuId == "") return;
            var me = this;
            me.showLoading();
            me.$http.post("/sys/sysmenu/show_" + me.sysMenuId + ".action").then(response => {
                var body = response;
                if (body.status == 0) {
                    me.sysMenu = body.obj;
                    me.buttons = JSON.parse(me.sysMenu.buttons);

                }
                me.hideLoading();
            }, response => {
                me.hideLoading();
            });
        },

        ok: function() {
            var me = this;
            var ok = false;
            me.$refs['sysMenu'].validate((valid) => {
                ok = valid;
                if (valid) {

                } else {
                    me.errorMessage('请认真填写数据');
                }
            })
            if (!ok) return;
            for (var i = 0; i < me.buttons.length; i++) {
                if (me.buttons[i]['name'] == "" ||
                    me.buttons[i]['methodName'] == "") {
                    me.errorMessage('方法名称不能为空');

                    return;
                }
            }

            me.sysMenu.buttons = JSON.stringify(me.buttons);
            me.modalLoading = true;
            delete me.sysMenu.childs;
            me.$http.post("/sys/sysmenu/doSave.action", me.sysMenu).then(response => {
                var body = response;
                if (body.status == 0) {
                    me.successMessage("保存成功！");
                    me.$router.push({ name: "SysMenuList" });


                } else {
                    me.errorMessage(body.info);
                }
                me.modalLoading = false;
            }, response => {
                me.modalLoading = false;
            });
        },
        cancel: function() {
            this.$router.push({ name: "SysMenuList" });
            return;
            // if (this.sysMenuId == null || this.sysMenuId == undefined || this.sysMenuId == "") {
            //     this.$router.push({ name: "SysMenuList" });
            //     return;
            // }
            // this.getDetail();
        },
        getList: function() {
            var me = this;
            me.loading = true;
            me.$http.post("/sys/sysmenu/getall.action", {}).then(response => {
                var body = response;
                if (body.status == 0) {

                    me.menus = body.obj;
                   // me.sysMenu.parentId = me.$route.query.parentId;
                   // if (!me.sysMenu.parentId)
                   //     me.sysMenu.parentId = 0;
                    // me.getDetail();
                }
                me.loading = false;
            }, response => {
                me.loading = false;
            });
        },
    }
}
</script>
<style scoped>
</style>